<template>
  <div>
    <head-component></head-component>
    <div class="container" style="margin-top: 50px;">
      <carousel-component :items="page.list.slice(0,5)" ></carousel-component>
      <hr />
      <div class="row mb-2">
        <div class="col-md-6" v-for="(item,index) in page.list">
          <div class="card flex-md-row mb-4 shadow-sm h-md-250">
            <div class="card-body d-flex flex-column align-items-start">
              <a target="_blank" :href="item.couponLink" >
                <strong class="d-inline-block mb-2 text-primary">{{item.name}}</strong>
              </a>
              <h3 class="mb-0">
                <a class="text-default" href="#">{{item.couponAmount}}</a>
              </h3>
              <div class="mb-1 text-muted">有效期：{{item.startTime}} : {{item.endTime}}</div>
              <p class="card-text mb-auto">优惠券：{{item.couponRest}} / {{item.couponCapacity}}</p>
              <div class="blog-description" style="margin-top: 5px;">店铺名称：
                <a href="#" >{{item.shopName}}</a>
              </div>
              <br/>
              <div>
                <button class="btn btn-success btn-sm">￥ {{item.price}} </button>
                <a target="_blank" :href="item.couponLink" class="btn btn-warning">抢购</a>
              </div>
            </div>
            <img @click="detail(index)" style="cursor: pointer;" class="img-responsive card-img-right flex-auto d-none d-lg-block"
                 :src="item.mainImg" :alt="item.name" />
          </div>
        </div>
        <div class="col-md-12">
          <!--<ul class="pagination">-->
          <!--<li class="page-item"><a class="page-link" href="#">上一页</a></li>-->
          <!--<li class="page-item"><a class="page-link" href="#">1</a></li>-->
          <!--<li class="page-item"><a class="page-link" href="#">2</a></li>-->
          <!--<li class="page-item"><a class="page-link" href="#">3</a></li>-->
          <!--<li class="page-item"><a class="page-link" href="#">下一页</a></li>-->
          <!--</ul>-->
          <page-component :page="page" v-on:clickWordCloud="getPageInfo"></page-component>
        </div>
      </div>
    </div>
    <foot-component></foot-component>
  </div>
</template>

<script>
import {getAllRebateGoods} from '../../api/client';
import FootComponent from './components/Footer'
import HeadComponent from './components/Header'
import CarouselComponent from './components/Carousel'
import PageComponent from './components/Page'
import { mapState,mapMutations } from 'vuex';

export default {
  name: 'rebate',
  computed:{},
  components:{
    FootComponent:FootComponent,
    HeadComponent:HeadComponent,
    CarouselComponent:CarouselComponent,
    PageComponent:PageComponent,
  },
  data () {
    return {
      hello:false,
      page:{
        number:0,
        size:6,
        totalElements:0,
        list:[]
      }
    }
  },
  methods:{
    getAll(){
      let that = this;
      getAllRebateGoods(0,4).then(function (data) {
        that.page = data;
      });
    },
    getPageInfo:function(number){
      let that = this;
      getAllRebateGoods(number,4).then(function (data) {
        that.page = data;
      });
    },
    detail:function (index) {
      window.open(this.page.list[index]['couponLink'])
    }
  },
  mounted(){
    this.getAll();
  },
  beforeDestroyed(){
  }
}
</script>

<style scoped>

  .card-img-right{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  /* stylelint-disable selector-list-comma-newline-after */
  h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  }

  .display-4 {
    font-size: 2.5rem;
  }
  @media (min-width: 768px) {
    .display-4 {
      font-size: 3rem;
    }
  }

  .card-img-right {
    height: 100%;
    border-radius: 0 3px 3px 0;
  }

  .flex-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .h-250 { height: 250px; }
  @media (min-width: 768px) {
    .h-md-250 { height: 250px; }
  }

  /*
   * Blog name and description
   */
  .blog-title {
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
  }
  .blog-description {
    font-size: 1.1rem;
    color: #999;
  }

  @media (min-width: 40em) {
    .blog-title {
      font-size: 3.5rem;
    }
  }

  /* Pagination */
  .blog-pagination {
    margin-bottom: 4rem;
  }
  .blog-pagination > .btn {
    border-radius: 2rem;
  }

  /*
   * Blog posts
   */
  .blog-post {
    margin-bottom: 4rem;
  }
  .blog-post-title {
    margin-bottom: .25rem;
    font-size: 2.5rem;
  }
  .blog-post-meta {
    margin-bottom: 1.25rem;
    color: #999;
  }

</style>
